<template>
	<v-autocomplete v-model="data" v-bind="$attrs" :items="items" :loading="loading" :search-input.sync="search" :disabled="disabled"/>
</template>

<script>
import MdMVVMObject from '@/common/mixins/MdMVVMObject';
import UserApi from '@/common/api/UserApi';
import Debounce from '@/common/class/Debounce';

export default {
	name: 'MdUserSelector',
	mixins: [MdMVVMObject],
	data() {
		return {
			items: [],
			search: undefined,
			debounce: new Debounce()
		}
	},
	computed: {},
	created() {
		this.getData();
	},
	methods: {
		getData(name) {
			this.loading = true;
			UserApi.admin.list({name}).then(res => {
				this.$utils.responseHandler(res).then(({data: {rows}}) => {
					if (!rows) {
						rows = [];
					}
					this.items = rows.map(item => {
						return {
							text: item.username,
							value: item.id
						}
					})
				})
			}).finally(() => this.loading = false)
		}
	},
	filters: {},
	watch: {
		search() {
			this.$nextTick(() => {
				this.debounce.do(() => {
					this.getData(this.search)
				}, 300)
			})
		}
	}
}
</script>

<style scoped lang="scss">

</style>